<template>
	<div class="mod-inviter" id="mod">
		<van-nav-bar class="nav-bar" title="邀请二维码" left-text="返回" left-arrow @click-left="$router.go(-1)" style="background:rgba(255,255,255,0.5);color:#fff;" />
		<div class="box" id="box" ref="imageDom">
			<img style="width: 100%;min-height: 100%;"
				src=""
			/>
		
			<div class="action-box" id="action-box">
				<div class="logoBox">
					<img
						class="logo"
						src=""
					/>
					<div class="logoTxt">{{ $config.name }}</div>
				</div>
				<div style="white-space: nowrap;overflow: auto;background: #FFFFFF;color: #999999;padding: 8px 10px;box-sizing: border-box;margin-bottom: 20px;border-radius: 5px;font-size: 14px;width: 95%;">{{url}}</div>
				<!-- <button class="btn btn_2" @click="doCopy()">复制链接</button> -->
				<!-- <div class="code" v-if="show">邀请码：{{ code }}</div>
				<div class="qrcode2" ref="qrcode"></div> -->
				<div class="action" v-if="show">
					<!-- <button class="btn btn_1" @click="clickGeneratePicture()">保存图片</button> -->
					<button class="btn btn_2" @click="doCopy()">复制链接</button>
				</div>
			</div>
		</div>
		<!-- <div class="box" id="box" ref="imageDom">
			<img
				v-if="show"
				src=""
			/>

			<div class="action-box" id="action-box">
				<div class="logoBox" v-if="show">
					<img
						class="logo"
						v-if="show"
						src=""
					/>
					<div class="logoTxt">{{ $config.name }}</div>
				</div>
				<div class="code" v-if="show">邀请码：{{ code }}</div>
				<div class="qrcode2" ref="qrcode" v-if="show"></div>
			</div>
		</div>

		<div class="action" v-if="show">
			<button class="btn btn_1" @click="clickGeneratePicture()">保存图片</button>
			<button class="btn btn_2" @click="doCopy()">复制链接</button>
		</div> -->
		<modal title="提示" :content="modalContent" :showCancle="showCancle" @on-confirm="confirm" v-show="showModal"></modal>
	</div>
</template>
<script>
import api from '@/api';
import modal from '@/components/modal/modal.vue'
// import html2canvas from 'html2canvas';
// import QRCode from 'qrcodejs2';
/**
     * html2canvas(this.$refs.imageDom, {
        backgroundColor: null // null 表示设置背景为透明色
      })
     */
export default {
	name: 'User',
	data() {
		return {
			show: true,
			code: '',
			url: '',
			showCancle: false,
			modalContent: '复制成功。如链接已分享，请点击确认。确认之后，邀请码将不再显示！',
			showModal: false
		};
	},
	created() {
		this.code = this.$route.query.code;
		this.url = this.$config.urlPrefix + '/register?code=' + this.code;
	},
	mounted() {
		// this.qrcode();
	},
    components: {
        modal,
    },
	methods: {
		/* qrcode() {
			let that = this;
			new QRCode(this.$refs.qrcode, {
				width: 150,
				height: 150, // 高度
				text: that.url // 二维码内容
			});
		},
		clickGeneratePicture() {
			html2canvas(this.$refs.imageDom)
				.then(canvas => {
					this.imgUrl = canvas.toDataURL('image/jpeg');
					let img = document.createElement('img');
					img.src = this.imgUrl;
					this.show = false;

					let mod = document.getElementById('action-box');
					mod.appendChild(img);
					img.style.width = '100%';
					this.$toast.success('长按图片保存');
					console.log(this.imgUrl);
				})
				.catch(error => {
					alert(error);
				});
		}, */
		doCopy: function() {
			let that = this;
			this.$copyText(this.url).then(
				function() {
					// that.$toast('分享链接，复制成功')
					that.showModal = true;
				},
				function() {
					that.$toast('复制失败');
				}
			);
		},
		confirm: function() {
			api.costActiveCode({
				code: this.code
			}).then(res => {
				console.log(res);
				if (res.data.code === 0) {
					this.showModal = false;
					this.$router.go(-1);
				} else {
					// this.$toast.fail(res.data.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mod-inviter {
	.box {
		position: absolute;
		width: 750px;
		height: 100%;
		left: 0;
		top: 0;
		background-size: 100% 100%;
		.action-box {
			position: absolute;
			width: 100%;
			height: 100%;
			left: 0;
			bottom: 30px;

			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;

			.logoBox {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				.logo {
					width: 200px;
					height: 200px;
				}

				.logoTxt {
					color: #fff;
					font-size: 35px;
					margin-top: 20px;
				}

				height: 50%;
			}

			.qrcode2 {
				border-radius: 10px;
				border: 20px solid #fff;
				overflow: hidden;
			}
			.code {
				color: #cddc39;
				margin-bottom: 20px;
			}
		}
	}

	.action {
		// position: absolute;
		width: 750px;
		// left: 0;
		// bottom: 80px;
		z-index: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		.btn {
			height: 50px;
			width: 200px;
			border-radius: 10px;
			border: 1px solid #d6c48a;
			color: #d6c48a;
			background: transparent;
			margin: 0 50px;
			&_1 {
				border: 1px solid #d6c48a;
				color: #d6c48a;
			}

			&_2 {
				border: 1px solid #e67e7e;
				color: #e67e7e;
			}
		}
	}
}
</style>
